<html>
<head>
    <title>表格动态操作</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function () {    // 加载事件进行处理
            document.getElementById("reset").addEventListener("click", clean, false);
            document.getElementById("add").addEventListener("click", function () {
                dno = document.getElementById("deptno").value;
                dna = document.getElementById("dname").value;
                loc = document.getElementById("loc").value;
                addRow(dno, dna, loc);
                clean();
            }, false);
        }

        function clean() {  // 清除表单中的数据项
            document.getElementById("deptno").value = "";
            document.getElementById("dname").value = "";
            document.getElementById("loc").value = "";
        }

        function addRow(deptno, dname, loc) {   // 添加表格行
            trElement = document.createElement("tr"); // 创建<tr>元素
            trElement.setAttribute("id", "dept-" + deptno); // 为表格行定义id属性
            deptnoTdElement = document.createElement("td"); // 创建<td>元素
            dnameTdElement = document.createElement("td"); // 创建<td>元素
            locTdElement = document.createElement("td"); // 创建<td>元素
            deptnoTdElement.appendChild(document.createTextNode(deptno)); // 添加文本元素
            dnameTdElement.appendChild(document.createTextNode(dname)); // 添加文本元素
            locTdElement.appendChild(document.createTextNode(loc)); // 添加文本元素
            deleteButTdElement = document.createElement("td"); // 创建<td>元素
            deleteButElement = document.createElement("button"); // 创建<button>元素
            deleteButElement.addEventListener("click", function () {
                if (window.confirm("确定要删除此信息吗？")) {
                    document.getElementById("deptBody").removeChild(document.getElementById("dept-" + deptno));
                }
            }, false);
            deleteButElement.appendChild(document.createTextNode("删除"));
            deleteButTdElement.appendChild(deleteButElement); // 将按钮添加到表格列
            trElement.appendChild(deptnoTdElement);
            trElement.appendChild(dnameTdElement);
            trElement.appendChild(locTdElement);
            trElement.appendChild(deleteButTdElement);
            document.getElementById("deptBody").appendChild(trElement);
        }
    </script>
</head>
<body>
<div>
    部门编号：<input type="text" id="deptno"><br>
    部门名称：<input type="text" id="dname"><br>
    部门位置：<input type="text" id="loc"><br>
    <button type="button" id="add">添加</button>
    <button type="button" id="reset">重置</button>
</div>
<div>部门信息列表</div>
<div>
    <table border="1" style="width: 700px;">
        <thead id="deptHead">
        <tr>
            <td>部门编号</td>
            <td>部门名称</td>
            <td>部门位置</td>
            <td>删除</td>
        </tr>
        </thead>
        <tbody id="deptBody"></tbody>
    </table>
</div>
</body>
</html>